$duration: .4s;
$checkedColor: #3385ff;
@mixin borderRadius($radius:20px) {
  border-radius: $radius;
}

.frc_switch_con {
  margin-top: 10px;
  font-size: 16px;
  display: flex;
  .frc_toggle_text{
    line-height: 31px;
  }

  .frc_switch {
    width: 52px;
    height: 31px;
    position: relative;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    @include borderRadius();
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: none;
    &:before {
      content: '';
      width: 29px;
      height: 29px;
      position: absolute;
      top: 0px;
      left: 0;
      @include borderRadius();
      background-color: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    &:checked {
      border-color: $checkedColor;
      box-shadow: $checkedColor 0 0 0 16px inset;
      background-color: $checkedColor;
      &:before {
        left: 21px;
      }
    }
    &.frc_switch_animbg {
      transition: background-color ease $duration;
      &:before {
        transition: left 0.3s;
      }
      &:checked {
        box-shadow: #dfdfdf 0 0 0 0 inset;
        background-color: $checkedColor;
        transition: border-color $duration, background-color ease $duration;
        &:before {
          transition: left 0.3s;
        }
      }

    }
    &.frc_switch_anim {
      transition: border cubic-bezier(0, 0, 0, 1) $duration, box-shadow cubic-bezier(0, 0, 0, 1) $duration;
      &:before {
        transition: left 0.3s;
      }
      &:checked {
        box-shadow: $checkedColor 0 0 0 16px inset;
        background-color: $checkedColor;
        transition: border ease $duration, box-shadow ease $duration, background-color ease $duration*3;
        &:before {
          transition: left 0.3s;
        }
      }

    }
  }

}